<template>
	<div class="brandClassification clearfix">
		<nav class="fl">
			<div>品牌</div>
			<div class="activity">上装</div>
			<div>下装</div>
			<div>连衣裙</div>
			<div>包包</div>
			<div>饰品</div>
			<div>食品</div>
		</nav>
		<div class="classify-container fl">
			<ul class="item-list clearfix">
				<li class="item fl"><router-link id="" to=""><img src=""/></router-link></li>
				<li class="item fl"><router-link id="" to=""><img src=""/></router-link></li>
				<li class="item fl"><router-link id="" to=""><img src=""/></router-link></li>
				<li class="item fl"><router-link id="" to=""><img src=""/></router-link></li>
			</ul>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		data () {return {}},
		name: 'app',
		methods:{

		}
	}
</script>
<style lang="scss">
.brandClassification{
	width:100%;
	nav{
		width: 1.83rem; height: 100%;
		div{ width: 1.83rem; height: 1.08rem; border-bottom: 2px solid #fff; font-size: 0.3rem; text-align: center; line-height: 1.08rem; color: #333; background: #f4f5f5;}
		.activity{ color: #ff365d; background: #fff;}
	}
	.classify-container{
		width: 5.67rem; height: 13.34rem; background:#fff;
		.item-list{
			width: 5.58rem; margin:0.1rem auto;
			li{
				width:1.66rem; height: 1.66rem; margin: 0.1rem 0.08rem; border: 0.02rem solid #f1f1f1;
				a{
					display:block; width:1.66rem; height:1.66rem;
					img{ display: block; width: 1.66rem; height: 1.66rem; margin: 0 auto;}
				}
			}
		}
	}
}
</style>